<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
<meta name="viewport" content="width=650,target-densitydpi=device-dpi, minimum-scale=0.5, maximum-scale=2,user-scalable=yes">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script  src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<style>
     


  
</style>
<script>

    // JavaScript Document
;
(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem() {
    var width = docEl.getBoundingClientRect().width
    // 适配平板
    if (width / dpr > 750) {
      width = 750 * dpr
    }
    var rem = 100 * (width / 750)
    docEl.style.fontSize = rem + 'px'
    flexible.rem = win.rem = rem;
}

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));



    // Find the right method, call on correct element
    function launchFullscreen(element) {
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }

      resizeW()
    }
    
    function exitFullscreen() {
      if(document.exitFullscreen) {
        document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      resizeW()
    }
    
    function dumpFullscreen() {
      console.log("document.fullscreenElement is: ", document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
      console.log("document.fullscreenEnabled is: ", document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled);
    }
    
    // Events
    document.addEventListener("fullscreenchange", function(e) {
      console.log("fullscreenchange event! ", e);
    });
    document.addEventListener("mozfullscreenchange", function(e) {
      console.log("mozfullscreenchange event! ", e);
    });
    document.addEventListener("webkitfullscreenchange", function(e) {
      console.log("webkitfullscreenchange event! ", e);
    });
    document.addEventListener("msfullscreenchange", function(e) {
      console.log("msfullscreenchange event! ", e);
    });
    

    // alert(window.screen.width)
    $(function (params) {
        resizeW()
    })
    function resizeW(params) {
        $(".mapGround").css("width",window.screen.width-40+"px");
        $(".mapGround").css("height",window.screen.height-15+"px");
        $(".col1").text(window.screen.width)
    }
    // Add different events for fullscreen
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #162716d1;
        }
        .fullscr{
 
            position: fixed;
            float: right;
            right: 0px;
            width: 220px;
            /* height: 100px; */
            margin: 5px;
            z-index: 9;
        }
        img{
            display: block;
            width: 100%;
        }
        .mapGround{
            width: 750px;
            height: 375px;
            /* padding: 10px; */
                
            float: left;
            left: 0px;
            top: -66px;
            position: absolute;
        }
        .row{
            width: 100%;
            height: 20%;
            line-height:0;
            left: 0px;            
            top:0px;
            position: relative;
        }
        .col1{
            background: url(cao.png) no-repeat; 
            height: 100%;
            width: 10%;
            /* border: 0px;
            border-radius: 0; */
            float: left;
            border:0px solid rgb(255, 255, 255)
            /* overflow: hidden;
            background-size: cover;
            margin: -5px -1px 0px 0px; */
    }
    .controlPad{
        z-index: 9;
    position: fixed;
    bottom: 85px;
    left: 20px;
    width: 90%;
    height: 100px;
    }

    #myAudio{
        position:absolute;
        z-index: 10;
    }

    .user{
        background: url(user.gif) no-repeat;
        height: 68px;
        width: 58px;
        background-size: contain;
        float: left;
        left: 44%;
        top: 47%;
        position: fixed;
        border: 0px solid rgb(255, 255, 255);
        z-index: 999;
    }
    </style>
</head>
<body>
<div class="fullscr">
    <span> <button onclick="launchFullscreen(document.documentElement);" class="sexyButton">Launch Fullscreen</button></span>
    <span><button onclick="exitFullscreen();" class="sexyButton">Hide Fullscreen</button> </span>
    <span><input id="row1" value=""/><input id="row2" value=""/><input id="col1" value=""/><input id="col2" value=""/> </span>
    
</div>


<div class="controlPad">
    <span> <button onclick="up();" class="sexyButton">up</button></span>
    <span><button onclick="down();" class="sexyButton">down</button> </span>
    <span><button onclick="left();" class="sexyButton">left</button> </span>
    <span><button onclick="right();" class="sexyButton">Right</button> </span>
    <span><button onclick="playSoundbyName({filename:'aBird1'});" class="sexyButton">sound</button> </span> 
    
</div> 
<div class="user"></div>
<script>
    var upI,downI,leftI,rightI;
    function up(params) {
        console.log("d")//持续往上
        clearInterval(upI)
        clearInterval(downI)
        clearInterval(leftI)
        clearInterval(rightI)
        upI = setInterval(() => {
            if(parseInt($(".row").css("top").replace("px",""))>= parseInt($(".row").css("height").replace("px","")) ){
                

 
                var mapData = JSON.parse(localStorage.getItem("pagemu")).mapData ; 

                mapData.showRowsMin = mapData.showRowsMin -1 ;
                mapData.showRowsMax = mapData.showRowsMax -1 ;
                localStorage.setItem("pagemu", JSON.stringify({ "mapData": mapData }));

                $("[data=r"+mapData.showRowsMin+"]" ).css("display","block");
                $("[data=r"+mapData.showRowsMax+"]" ).css("display","none");
                $(".row").css("top",  "0px" )
            }
            $(".row").css("top", parseInt($(".row").css("top").replace("px",""))+1+"px" )
        }, 18);
    }
    function down(params) {
        clearInterval(upI)
        clearInterval(downI)
        clearInterval(leftI)
        clearInterval(rightI)
        downI=setInterval(() => {
            if(parseInt($(".row").css("top").replace("px",""))<= (-1) * parseInt($(".row").css("height").replace("px","")) ){
                

 
                var mapData = JSON.parse(localStorage.getItem("pagemu")).mapData ; 

                mapData.showRowsMin = mapData.showRowsMin +1 ;
                mapData.showRowsMax = mapData.showRowsMax +1 ;
                localStorage.setItem("pagemu", JSON.stringify({ "mapData": mapData }));

                $("[data=r"+mapData.showRowsMin+"]" ).css("display","none");
                $("[data=r"+mapData.showRowsMax+"]" ).css("display","block");
                $(".row").css("top",  "0px" )
            }
            $(".row").css("top", parseInt($(".row").css("top").replace("px",""))-1+"px" )
        }, 18);
    }
    function left(params) {
        clearInterval(upI)
        clearInterval(downI)
        clearInterval(leftI)
        clearInterval(rightI)
        leftI=setInterval(() => {
            
            $(".row").css("left", parseInt($(".row").css("left").replace("px",""))+1+"px" )
        }, 18);
    }
    function right(params) {
        clearInterval(upI)
        clearInterval(downI)
        clearInterval(leftI)
        clearInterval(rightI)
        rightI=setInterval(() => {
            
            $(".row").css("left", parseInt($(".row").css("left").replace("px",""))-1+"px" )
        }, 18);
    }

    function playSoundbyName(params) {
    var soundName = params.filename ;
    var tmpId =  "tmpSound" + parseInt(Math.random()*1000000)
    var tmpSound = $('<audio id="'+tmpId+'" controls>  <source src="wav/'+soundName+'.wav" type="audio/wav">  </audio>')   
    $("body").append(tmpSound) 
    var x = document.getElementById(tmpId); 
    x.play();
    setTimeout(() => {
            tmpSound.remove()
    }, 1000);
    
    }
</script>

 

<audio id="myAudio"   preload="auto"> 
  您的浏览器不支持 audio 元素。
</audio>
 
<!-- 5*10 -->
<div class="mapGround"> 
</div>
</body>

</html>
 
 

<script  src="loadsound.js" ></script>
<script>
    preLoadSound.init();
</script>



<script>
    // 自动创建地图块，默认显示地图中间的5*10块，多显示一圈，
    // 奇迹坐标系复制转换系统。这里先按前端的方法显示和动态加载。 
    // 一块的大小是250*250像素，一屏幕 2500*1250像素
    // 这里我们假定地图尺寸为20000*20000像素，实际需要拷屏相加，实际每个地图都不一样大小。
    // 而我们有切好的小块地图，命名为 yzdl.000.000.jpg 这表示勇者大陆的第一块图，坐标 0 ，0 100*100个div
     
   var mapDiv = $('.mapGround');
 
  
   var mapRows = 100 , mapCols = 100 ;
//    显示区域为50-6----50+6
//    纵坐标  50-3   50+4   
   var  showRowsMin = 48 ;
   var  showRowsMax = 53 ;
   var  showColsMin = 46 ;
   var  showColsMax = 55 ;
   var f = function(i) {
       if(i<10){return "00"+i;}
       if(i<100){return "0"+i;}
        return  i; 
   }
   for (let i = 0; i < mapRows; i++) {
        var row = $('<div class="row"  ></div>'); 
        row.attr("data","r"+i);
        if(i>=showRowsMin && i<=showRowsMax  ){ 
                row.css("display","block");
            }else{
                row.css("display","none");
            }
       for (let j = 0; j < mapCols; j++) {
            var col = $('<div class="col1">1</div>');
            col.attr("data","c"+j);
            if( j>=showColsMin && j<=showColsMax){ 
                col.css("display","block");;
            }else{
                col.css("display","none");
            }
            row.append(col);  
            // style:"background: url(cao1.png) no-repeat;" 
            // col.css("display","background: url(cao.png) no-repeat;"); 
       }
       mapDiv.append(row)       
   }
   var mapData = {
        showRowsMin : 48 ,
        showRowsMax : 54 ,
        showColsMin : 46 ,
        showColsMax : 55 ,
   }
   localStorage.setItem("pagemu", JSON.stringify({ "mapData": mapData }));

   setInterval(() => {
        var mapData = JSON.parse(localStorage.getItem("pagemu")).mapData ; 
        $("#row1").val(mapData.showRowsMin)
        $("#row2").val(mapData.showRowsMax)  
        $("#col1").val(mapData.showColsMin)
        $("#col2").val(mapData.showColsMax)
   }, 10);

 
    
</script>



 

